<script setup>
import {Avatar, House, Message, Notebook, Setting, UserFilled} from "@element-plus/icons-vue";

import {useRoute} from "vue-router";

const route = useRoute()
/*获取头像*/
const tx = ref('/src/assets/logo.jpg')
</script>

<template>
  <div class="menu-container">
    <el-card>
      <!--头像-->
      <div style="text-align: center;">
        <el-avatar :icon="UserFilled" :size="80" :src=tx size='large'/>
      </div>
      <!--    菜单篮子  -->
      <div class="cdlz">

        <el-menu :default-active="route.path"
                 class="el-menu" router>
          <!--         首页 -->
          <el-menu-item index="/admin">
            <el-icon class="icon-tr">
              <House/>
            </el-icon>
            <template #title>首页</template>
          </el-menu-item>
          <!--         文章 -->
          <el-menu-item index="/admin/article">
            <template #title>
              <el-icon class="icon-tr">
                <Message/>
              </el-icon>
              <span>文章</span>
            </template>
          </el-menu-item>


          <!--         分类 -->
          <el-menu-item index="/admin/sort">
            <el-icon class="icon-tr">
              <Notebook/>
            </el-icon>
            <template #title>分类</template>
          </el-menu-item>
          <!--         用户 -->
          <el-menu-item index="/admin/user">
            <el-icon class="icon-tr">
              <Avatar/>
            </el-icon>
            <template #title>用户</template>
          </el-menu-item>
          <!--         设置 -->
          <el-menu-item index="/admin/set">
            <el-icon class="icon-tr">
              <Setting/>
            </el-icon>
            <template #title>设置</template>
          </el-menu-item>

        </el-menu>

      </div>


    </el-card>
  </div>
</template>

<style scoped>
.el-menu-item {

  font-size: 16px;


}


.icon-tr {
  margin-left: 40px;
  font-size: 16px;
}


.el-menu-item:hover {
  background-color: rgb(238, 238, 241); /*鼠标停留背景色*/

}

.cdlz {
  border-right: solid 1px var(--el-menu-border-color); /*线条颜色*/
  height: 800px; /*边框高度*/
  transform: translateY(30px); /* 下移30个像素 */

}

.el-menu {
  /*  border-right: solid 1px var(--el-menu-border-color); !*线条*!
    height: 850px; !*高度*!*/

  border-right: none; /*边条颜色替换为空*/

}

.el-card {
  height: 100%;
}


.menu-container {
  height: 100%;
  overflow-x: hidden; /* 防止水平滚动 */
  overflow-y: hidden; /* 防止垂直滚动 */
  width: 250px;
  margin-top: -2px;
}
</style>